<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta name="layout" content="main_pc">
        <title>火堆工作台</title>       
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'user.center.css')}" type="text/css">
    </head>
<body>
	<div class="container-fluid">
		<section class="quick-navi mb20">
			<div class="container">
				<a href="#" class="quick-link"><span>火堆工作台</span><span
					class="caret"></span></a>
				<!--a href="#" class="quick-link">联系我们</a-->
			</div>
		</section>

		<section>
			<div class="container mb50">
												
				<g:render template="navigate"   model="[status: status]"/>
				
				
				
				<div class="right-content" id="rightconsole">  
				    <div style="border:#DBDBDB solid thin;padding:10px 10px">     
               		<header>
                             	<span style="font-size:20px">注意：</span>
                             	 <a class="floatr" href="javascript:if(confirm('确认要开启?')) location='/scfire/login/createMenu'"><div style="width:60px; background-color:#8EE5EE; padding:12px;font-size:16px;color:#fff">开启</div></a>
                             	 <a class="floatr" href="/scfire/manage/createMainMenu"><div style="width:110px; background-color:#ddd; padding:15px;font-size:16px">添加主菜单</div></a>
                             	 <a class="floatr" href="/scfire/manage/createsubMenu"><div style="width:110px; background-color:#8EE5EE; padding:15px;font-size:16px;color:#fff">添加子菜单</div></a>
									<p>1级菜单最多只能开启3个，2级菜单最多开启5个；</p>
									<p>只有保存主菜单后才可以添加子菜单；</p>  
									<p>当您添加完主菜单和子菜单之后，请点击“启用”按钮，正式启用</p>
								</header>
                    </div>
                    <div class="data-list-box">                                  
                        <ul class="cdsp-table" id="mainmenu">
                            <li class="t-head">
                                <div class="col-2">显示顺序</div>
                                <div class="col-4">主菜单名称</div>
                                <div class="col-4">按钮类型</div>
                                <div class="col-7">触发关键词或链接地址</div>
                                <div class="col-3">操作</div>
                                <div class="clearboth"></div>
                            </li>
                            <g:each in="${mainMenus}" var="${mainMenu}" status="i">
                            <li>
                            <g:form id="form-edit${i}" url="[resource:mainMenuInstance,controller:'manage', action:'editMainMenu']" method="post" class="form-horizontal">
                            <div class="col-2">
                             <input type="hidden"  value="${mainMenu.id}"  name ="id"/>
                            <input type="number" id="position${i}" name="position" class="form-control" value="${mainMenu.position}" readonly/></div>
                            <div class="col-4"><input type="text" id="name${i}" name="name" class="form-control" value="${mainMenu.name}" readonly/></div>
                            <div class="col-4">
							    <select class="form-control"  id="type${i}" onchange="BtnType(this,${i })" disabled="disabled" >
                                    <option value= "${mainMenu.type}" selected="selected">${mainMenu.type}</option>
                                    <option value="click">click</option>
                                    <option value="view">view</option>
                                    <option value="scancode_push">scancode_push</option>
                                    <option value="scancode_waitmsg">scancode_waitmsg</option>
                                    <option value="pic_photo_or_album">pic_photo_or_album</option>
                                    <option value="pic_weixin">pic_weixin</option>
                                    <option value="location_select">location_select</option>
                                    <option value="media_id">media_id</option>
                                    <option value="view_limited">view_limited</option>
                                </select>
                                <input type="hidden"  value="${mainMenu.type}" id="typein${i}" name ="type"/>
                            </div>
                            <div class="col-7"><input type="text" id ="key${i}" class="form-control" name="key" value="${mainMenu.key}" readonly/></div>
                            <div class="col-3">
                            <g:if test="${mainMenu.id != 1 }">
                             <a href="#" style ="margin-left:10px"><g:link controller="manage" action="deleteMainMenu" params='[mainmenuid:"${mainMenu.id}"]' >删除</g:link></a>
							 <a style ="margin-left:10px"  onclick="editMenu(${i},this)"   >编辑</a>
							 </g:if>
                            </div>
                            <div class="clearboth"></div>
                            
                            </g:form>
                            </li>
                            </g:each>
                            
                          <li>
                            <g:form id="form-all" url="[resource:mainMenuInstance,controller:'manage', action:'saveMainMenu']" method="post" class="form-horizontal">                                                       
                            <div class="col-2">
                            <input type="number" class="form-control"  value="0" min=0 name="position"></div>
							<div class="col-4"><input type="text" class="form-control" name="name" ></div>
							<div class="col-4">
							    <select class="form-control"  onchange="BtnType(this,'')">
                                    <option value="click" selected="selected">click</option>
                                    <option value="view">view</option>
                                    <option value="scancode_push">scancode_push</option>
                                    <option value="scancode_waitmsg">scancode_waitmsg</option>
                                    <option value="pic_photo_or_album">pic_photo_or_album</option>
                                    <option value="pic_weixin">pic_weixin</option>
                                    <option value="location_select">location_select</option>
                                    <option value="media_id">media_id</option>
                                    <option value="view_limited">view_limited</option>
                                </select>
                                <input type="hidden" value="click" id="typein" name = "type"/>
							</div>
							<div class="col-7"><input type="text" class="form-control" name="key"></div>
							<div class="col-3">
							<a style ="margin-left:10px"  onclick="saveAll()">保存</a>
							</div>
							<div class="clearboth"></div>
						 </g:form>
						</li> 	
                    </ul>                 
                  </div>
                  
                </div>				
			</div>
			<div class="clearboth"></div>
		</section>


	</div>



	<script type="text/javascript">

	window.onload = function(){
		 var result= "<%=result%>";
		 if(result=="ok") alert("开启成功")
	}

	function editMenu(i,element){
		document.getElementById("position"+i).readOnly=false;
		document.getElementById("name"+i).readOnly=false;
		document.getElementById("key"+i).readOnly=false;
		document.getElementById("type"+i).disabled= false;
	    var obj = element.parentNode;
	    while(obj.hasChildNodes()) //当div下还存在子节点时 循环继续
	    {
	    	obj.removeChild(obj.firstChild);
	    }
	    var span=document.createElement("span");   
	    span.innerHTML ='<a style ="margin-left:10px"  onclick="EditSave('+i+')">保存</a>'
	    obj.appendChild(span);
	}  

    function EditSave(i){
    	var submenu = document.getElementById("mainmenu");
		var t=submenu.getElementsByTagName("li").length;
		if(t>5){ alert("主菜单最多只能开启3个");return;}
		if(!checkForm()) return;
    	$("#form-edit"+i).submit();
    }
	
    function saveAll(){
    	var submenu = document.getElementById("mainmenu");
		var t=submenu.getElementsByTagName("li").length;
		if(t>4){ alert("主菜单最多只能开启3个");return;}
        if(!checkForm()) return;
    	$("#form-all").submit();
	}
	
	function BtnType(data,i){
		$("#typein"+i).val(data.value);
	}


	function checkForm(){
		var name = $("#name").val();
		
		if(name == ''){
			alert("请填写主菜单名称");
			return false;
		}
		return true;
	}
	
	</script>
	

</body>
</html>